<!--
 * @Author: linzq
 * @Date: 2021-05-04 00:32:44
 * @LastEditors: linzq
 * @LastEditTime: 2022-05-26 16:22:05
 * @Description: 进度看板
-->
<template>
  <div class="bg-img">
    <p class="title">进度看板</p>
    <div class="parent" id="barrage">
      <Tabs />
      <Tabs />
      <Tabs />
    </div>
    <div class="demo-control">
      <div>
        <select v-model="data.position">
          <option value="normal">滚动弹幕</option>
          <option value="bottom">底部固定弹幕</option>
          <option value="top">顶部固定弹幕</option>
        </select>
        <select v-model="data.fontSize">
          <option value="12">12</option>
          <option value="15">15</option>
          <option value="18">18</option>
        </select>
        <input type="text" style="float: left" v-model="data.msg" />
        <button type="button" style="float: left" @click="addToList">Add</button>
        <button type="button" @click="pauseBarrage">Pause</button>
        <button type="button" @click="replayBarrage">replay</button>
      </div>
    </div>

    <vue3-barrage ref="barrage" :lanesCount="6" :boxHeight="data.stageHeight" :isShow="data.barrageIsShow"
      :list="data.list" :loop="data.barrageLoop" :speed="data.speed" attachId="barrage" :fontSize="data.fontSize">
      <!-- 自定义弹幕样式 -->
      <!-- <template #barrage="list">
        <span style="color: #00099">{{ list.item.msg }}</span>
      </template> -->
    </vue3-barrage>


  </div>
</template>

<script lang="ts" setup>
import Tabs from './components/tabs.vue';
import { ref, reactive } from 'vue';

// 帧率检测
import Stats from './Stats.js';
var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
function animate() {
  stats.begin();
  // monitored code goes here
  stats.end();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

const barrage = ref(null);

type PositionStatus = 'normal' | 'top' | 'bottom';
interface BarrageList {
  msg: string | undefined;
  position: PositionStatus;
}

// 响应式数据
let data = reactive({
  list: [] as Array<BarrageList>,
  msg: [
    '一',
    '连哥',
    '三个字',
    '四个字在',
    '555555555',
    '里格兹各自和',
    '1588888888888',
    '1588888888888+1字',
    '1588888888888+122字',
    'Hello World!vue-barrage 0.0.1',
  ],
  position: 'normal',
  fontSize: 12,
  stageHeight: 300,
  barrageIsShow: true,
  currentId: 0,
  barrageLoop: false,
  hoverLanePause: true,
  speed: 6
});
const addToList = () => {
  if (data.position === 'bottom') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        msg: data.msg[Math.floor(Math.random() * 10)],
        position: 'bottom',
      };
    });
    data.list.push(...arr);
  } else if (data.position === 'top') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        msg: data.msg[Math.floor(Math.random() * 10)],
        position: 'top',
      };
    });
    data.list.push(...arr);
  } else {
    const arr: Array<BarrageList> = Array.from({ length: 30 }, (e) => {
      return {
        msg: data.msg[Math.floor(Math.random() * 10)],
        position: 'normal',
      };
    });
    data.list.push(...arr);
  }

};
const pauseBarrage = () => {
  barrage.value.pause();
};
const replayBarrage = () => {
  barrage.value.replay();
};

const maxRows = (e) => {
  // console.log(e);
};
</script>

<style lang="less" scoped>
.barrage-stage {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bg-img {
  background: url('../../assets/sky.jpg') no-repeat;
  min-height: 100vh;

  .title {
    font-size: x-large;
    font-weight: 600;
    color: #ebecf0;
    padding: 12px;
  }

  .parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
}
</style>
